<template>
  <view class="group">
    <view class="image" @click="goProduct(model)" v-if="model.product && model.product.mainImage">
      <u--image lazy-load width="375rpx" :fade="true" duration="450" mode="widthFix" :src="baseUrl + model.product.mainImage.path"></u--image>
    </view>
    <view class="status">
      {{model.status | statusText}}
    </view>
    <view class="params">
      <view>{{ total }}人团</view>
      <view v-if="model.user">团长: {{ model.user.nickname }}</view>
      <view class="diff" v-if="model.fans && total - model.fans.length > 0">还差{{ total - model.fans.length }}人</view>
    </view>
    <view class="fans" v-if="model.fans && model.fans.length >= 1">
      <view class="f" v-for="(o, i) in model.fans" :key="i">
        <view class="win" v-if="o.win * 1 === 1">拼中</view>
        <u-avatar class="x" :class="{'win_': o.win * 1 === 1}"  :src="getAvatar(o.user)" size="85"></u-avatar>
      </view>
    </view>
  </view>
</template>

<script>
import color from '../../config/color'
import config from '../../config/config'
import base64 from '../../util/base64'
import Group from '../../api/group'
const groupModel = new Group()

export default {
  filters: {
    statusText(v) {
      let str = '待支付'
      if (+v === 1) {
        str = '进行中'
      }
      if (+v === 2) {
        str = '已完成'
      }
      return str
    }
  },
  data() {
    return {
      baseUrl: config.baseUrl,
      activeColor: color.main_color,
      total: 10,
      model: {}
    }
  },
  onLoad(options) {
    this.id = options.id
    this.fetch()
  },
  methods: {
    getAvatar(user) {
      if (!user) {
        return ''
      }
      return +user.av === 0 ? user.avatar : config.baseUrl + user.avatar
    },
    goProduct(item) {
      uni.navigateTo({
        url: `/sub_product/detail/index?id=${item.product_id}`
      })
    },
    fetch() {
      groupModel.getGroup({ id: this.id }).then(response => {
        let { data } = response
        data = base64.parse(data)
        console.log(data)
        this.model = data.model
        this.total = data.quantity
        this.setTitle(data.model.product.title)
      })
    },
    setTitle(title) {
      uni.setNavigationBarTitle({
        title
      })
      uni.setNavigationBarColor({
        frontColor: '#ffffff',
        backgroundColor: this.activeColor,
        animation: {
          duration: 400,
          timingFunc: 'easeIn'
        }
      })
    }
  }
}
</script>

<style scoped lang="scss">
.group {
  min-height: 100vh;
  background: #f3f5f7;
  padding: 20rpx;
  font-size: 24rpx;
  .image {
    background: white;
    margin-bottom: 10px;
    border-radius: 10rpx;
  }
  .status {
    height: 30px;
    line-height: 30px;
    background: $main_color;
    color: white;
    padding: 0 10px;
  }
  .params {
    display: flex;
    flex-wrap: wrap;
    margin-top: 10px;
    view {
      display: inline-block;
      background: $main_color;
      margin-right: 10rpx;
      padding: 2rpx 5rpx;
      color: white;
      font-size: 20rpx;
      &.diff {
        background: none;
        color: $main_color;
        border: 1rpx solid $main_color;
      }
    }
  }
  .fans {
    background: white;
    padding: 20rpx;
    display: flex;
    flex-wrap: wrap;
    margin-top: 10px;
    border-radius: 10rpx;
    .f {
      //background: red;
      margin-right: 10rpx;
      margin-bottom: 10rpx;
      position: relative;
      .x {
        //margin-right: 10rpx;
        //margin-bottom: 10rpx;
        &.win_ {
          border: 1rpx solid $main_color;
        }
      }
      .win {
        transform: rotate(-30deg);
        position: absolute;
        z-index: 10;
        left: 25rpx;
        top: 25rpx;
        color: $main_color;
        font-size: 24rpx;
        //font-weight: 700;
      }
    }
  }
}
</style>
